<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' type='text/css' />
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.print.css' type='text/css' media='print' />
<script type='text/javascript' src='/js/fullcalendar/fullcalendar-<?php echo $language ?>.js'></script>

<script type="text/javascript">
    $(document).ready(function() {
        // Calendar
        $('#external-events .external-event').each(function() {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        }).css('cursor', 'move');
        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function(date, allDay) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');

                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                $(this).remove();
            }

        });
    });
</script>

<section class="four-fifths">
    <div class="box">
        <div class="inner">
            <div class="contents">
                <div id='calendar'></div>
            </div>
        </div>
    </div>
</section>

<section class="one-fifth">
    <div id='external-events'>
        <h4><?php echo lang('common.common_task'); ?></h4>
        <ul class="no-bullets">
            <li class='external-event'><span class="icon entypo write"></span> Add a post about the ZOO</li>
            <li class='external-event'><span class="icon entypo close"></span> Delete Spam</li>
            <li class='external-event'><span class="icon awesome thumbs-down"></span> Ban some user</li>
            <li class='external-event'><span class="icon awesome envelope"></span> Write e-mail to friend</li>
        </ul>
    </div>
</section>